<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="zy_form">
			<view class="sk_money">
				<view class="sk_money_title">转账数量</view>
				<view class="sk_money_bum">
					<input v-model="transfer.money" type="text"  maxlength="140"/>
				</view>
			</view>
			<view class="pay_type">
				<view class="pay_title">转账类型</view>
				<uv-radio-group 
					style="margin-top: 10px;"
					v-model="paytypevalue" 
					placement="column" 
					size="22"
					iconPlacement="right">
					<uv-radio v-for="(item,index) in paytype" :key="index" :name="item.name"  activeColor="#db6969" :value="item.name">{{item.name}}</uv-radio>
				</uv-radio-group>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">收款账号</view>
				<view class="werste">
					<input  v-model="transfer.mobile"  class="uni-input" type="number" />
				</view>
			</view>
			<view class="uni-title">备注</view>
			<textarea class="uni-textarea" v-model="transfer.remark" style="height: auto;"  maxlength="140"></textarea>
			<view  class="buies">
				<button @top="openModal"  type="default" plain="true">立即转账</button>
			</view>
		</view>
		<payKeyboard v-if="showKeyBoard" title="Mi安全键盘" @success="enterSuccess" @close="close"></payKeyboard>
	</view>
</template>

<script>
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
	export default{
		components: { payKeyboard },
		data(){
			return{
				navstyle: {
					title: "转账",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				paytypevalue: "余额 -> 余额（1：1)",
				paytype: [{
					name: "余额 -> 余额（1：1)"
				}],
				showKeyBoard:false,
				 transfer: {
					money: "",
					mobile: "",
					paypassword: "",
					remark: ""
				},
			}
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/user/money' // 替换成上一页的路径
				});
			},
			// 打开输入框
			openModal() {
				this.showKeyBoard = true
			},
			// 输入正确的回调
			enterSuccess(password) {
				console.log(password) // 输入的密码
				this.transfer.paypassword = password
				this.showKeyBoard = false
			},
			// 点击[取消] 关闭输入框 的回调
			close(){
				this.showKeyBoard = false
			},
		}
	}
</script>

<style>
	.page{
		width: 100%;
		height: 100%;
	    background-color: #fafafa;
	}
	.zy_form {
	    display: flex;
	    flex-direction: column;
	}
	
	.sk_money {
	    display: flex;
	    flex-direction: column;
	    background-color: #fff;
	    padding: 10px;
	}
	.sk_money_bum {
	    display: flex;
	}
	.sk_money_bum input{
	    font-size: 40px;
	    font-weight: 700;
	}
	.sk_money_title {
	    color: #a8a8a8;
	}
	.pay_title{
	    font-weight: 700;
	}
	.uni-list-cell {
		background: #fff;
		height: 50px;
	    border-bottom: #efefef 1px solid;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    font-size: 14px;
	}
	.uni-list-cell-left{
	    font-size: 15px;
	    font-weight: 700;
	    padding: 0 15px;
	}
	.uni-input {
	    padding: 7px 12px;
	    line-height: 34px;
	    font-size: 14px;
	    background: #fff;
	    flex: 1;
	}
	.werste input{
	    box-shadow: 0 0 4px #f0f0f0;
	    border-radius: 50px;
	    width: 230px;
	    margin-right: 10px;
	    border: 1px solid #dedddd;
		height: 10px !important;
	}
	.werste input:hover {
	    box-shadow: 0 0 4px #009600;
	    border: 1px solid #009600;
		height: 10px !important;
	}
	
	.pay_type {
	    display: flex;
	    flex-direction: column;
	    align-items: left;
	    width: 95%;
	    padding: 10px;
	    background-color: #fff;
	    margin: 10px auto 10px auto;
	    border-radius: 10px;
	    height: auto;
	}
	.uni-title {
	    font-size: 15px;
	    font-weight: 500;
	    padding: 10px 15px;
	    line-height: 1.5;
	}
	.uni-textarea {
	    width: 88%;
	    background: #fff;
	    margin: 0 auto;
	    border: 1px solid #e8e5e5;
	    padding: 5px 10px;
	}
	.buies {
		margin-top: 10px;
		margin-bottom: 32px;
	}
	.buies button {
	    color: #fff;
	    border-radius: 53px;
	    background: linear-gradient(135deg, #d66c6b, #ed6266);
	    margin: 15px auto;
	    width: 60%;
	    font-size: 14px;
	    border: none;
	}
</style>